<style lang='less' >
    .couponRecordFilterForm{
        .filterButton{
            .btn{
                float:right;
                &:first-child{
                    border: 1px solid #f7931e;
                    background-color: #fff;
                    color: #f7931e;
                    margin:0 20px;
                }
            }
        }
    }
</style>

<template>
    <div class='couponRecordFilterForm'>
        <div class="filterForm " >
            <div class="filterContBox">
                <div class="filterLabel">卡券ID</div>
                <el-input 
                size="small"
                v-model="filterObj.cardId" 
                placeholder="请输入卡券ID"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox"  v-if='filterObj.viewType =="COUPON_USED"'>
                <div class="filterLabel">用户帐号</div>
                <el-input 
                size="small"
                v-model="filterObj.moblie" 
                placeholder="请输入帐号"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox" v-if='filterObj.viewType =="COUPON_USED"'>
                <div class="filterLabel">姓名</div>
                <el-input
                size="small" 
                v-model="filterObj.userName" 
                placeholder="请输入姓名"
                class="filterInput"
                ></el-input>
            </div>


            <div class="filterContBox" v-if='filterObj.viewType =="COUPON_SEND_BY_FINANCIAL"'>
                <div class="filterLabel">转发人</div>
                <el-input 
                size="small"
                v-model="filterObj.sourceName" 
                placeholder="请输入转发人姓名"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox" v-if='filterObj.viewType =="COUPON_SEND_BY_SYSTEM"'>
                <div class="filterLabel">发放人</div>
                <el-input 
                size="small"
                v-model="filterObj.sourceName" 
                placeholder="请输入发放人姓名"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox" v-if='filterObj.viewType !="COUPON_USED"'>
                <div class="filterLabel">领取人账号</div>
                <el-input 
                size="small"
                v-model="filterObj.moblie" 
                placeholder="请输入领取人账号"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox" v-if='filterObj.viewType !="COUPON_USED"'>
                <div class="filterLabel">领取人姓名</div>
                <el-input 
                size="small"
                v-model="filterObj.userName" 
                placeholder="请输入领取人姓名"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox" v-if='filterObj.viewType =="COUPON_USED"'>
                <div class="filterLabel">订单号</div>
                <el-input 
                size="small"
                v-model="filterObj.orderId" 
                placeholder="请输入订单号"
                class="filterInput"
                ></el-input>
            </div>

            <div class="filterContBox">
                <div class="filterLabel">类型</div>
                <el-select 
                clearable
                size="small"
                class="filterInput"
                v-model="filterObj.type" 
                placeholder="请选择">
                    <el-option
                        v-for="item in typeOption"
                        :key="item.name"
                        :label="item.value"
                        :value="item.name">
                    </el-option>
                </el-select>
            </div>
            <div class="filterContBox" v-if='filterObj.viewType =="COUPON_USED"'>
                <div class="filterLabel">状态</div>
                <el-select 
                clearable
                size="small"
                class="filterInput"
                v-model="filterObj.status" 
                placeholder="请选择">
                    <el-option
                        v-for="item in statusOption"
                        :key="item.name"
                        :label="item.value"
                        :value="item.name">
                    </el-option>
                </el-select>
            </div>

        <el-form :model="filterObj" :rules="ruleForm" ref='recordForm' style="display:inline-block; padding:0;">
            <el-form-item  prop="tempDay">
                <div class="filterContBox">
                    <span class="filterLabel">{{filterObj.viewType =="COUPON_SEND_BY_FINANCIAL" ? '转发时间' : '发放时间'}}</span>
                    <el-date-picker
                        size="small"
                        v-model="filterObj.tempDay"
                        :default-value=filterObj.tempDay
                        type="daterange"
                        @change="setDaterange"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
            </el-form-item >
        </el-form>
          
        </div>

        <div class='filterButton'>
            <el-button class="btn" @click='exportForm()' v-if='buttonConfig &&buttonConfig.export'>导出</el-button>
            <el-button type="warning" class="btn" v-if='buttonConfig &&buttonConfig.query' @click='submitForm()'>查询</el-button>
        </div>

    </div>
  
</template>

<script>
    import{typeOption, couponRecordstatusOption, recordFilterRules} from '../config.js'
    export default {
        props:['filterObj', 'buttonConfig'],
        components:{
        },
        data(){
            return{
                ruleForm:recordFilterRules,
                viewType: this.filterObj.viewType ,
                url:'',
                typeOption:typeOption,
                statusOption:couponRecordstatusOption,

            }
        },
        methods:{
             submitForm() {
                this.$refs.recordForm.validate((valid) => {
                if (valid) {
                    console.log('submit!');
                    this.getCouponRecordList()
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            setDaterange(val){
                if(val){

                this.filterObj.dayStart = val.slice(0,10);
                this.filterObj.dayEnd = val.slice(13,val.length);
                }
            },
            getCouponRecordList(){
                this.$emit('setfilterConditionListShow')
            },
            exportForm(){
                this.$emit('setfilterConditionExport')

            },

        },
        created(){

        },
        mounted(){

        },
    }
</script>